<template>
    <div id="demo">
     <button v-on:click="show = !show">
      Toggle
     </button>
 
    <transition name="fade"> 
         <p v-if="show">hello</p>
     </transition>
     <div>
         <ul>
             <li  @mouseover="show1=1" @mouseout="show1=-1">
 
                  <h3><a href="">企业文化</a>|</h3>
 
                  <transition name="fade">
 
                    <div class="sub" v-show="show1==1">
 
                        <ul>
 
                          <li><a href="">公司理念</a></li> 
 
                          <li><a href="">发展战略</a></li>
 
                         <li><a href="">发展历程</a></li>
 
                     </ul>
 
               </div>
 
        </transition>
 </li>
         </ul>
     </div>
 </div>
</template>
<script>
export default {
   
    data(){
        return{
      show:false ,  //vue实例 定义一个变量
      show1:-1
        }
    }
  }
</script>
<style scoped>
.fade-enter-active, .fade-leave-active {  
     transition: opacity .5s;  
     opacity: 0;    
 }
</style>